<template>
  <Common>
    <template v-slot:top>
      <el-form
        size="medium"
        :inline="true"
        :model="form"
        class="demo-form-inline"
      >
        <el-form-item label="样品编号:">
          <el-input v-model="form.samNumber" placeholder="样品编号"></el-input>
        </el-form-item>
        <!-- <el-form-item label="货位编号:">
          <el-input v-model="form.boxMark" placeholder="货位编号"></el-input>
        </el-form-item> -->
        <el-form-item label="样品位置:">
          <el-select v-model="form.hadBox" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="selectData"
            :loading="loading"
            >查询</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-refresh-left"
            @click="reset"
            :loading="loading"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:table>
      <el-table
        :data="tableData"
        v-loading="loading"
        height="90%"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="samNumber" label="样品编号"> </el-table-column>
        <el-table-column prop="samName" label="样品名称"> </el-table-column>
        <el-table-column prop="boxMark" label="料箱编号"> </el-table-column>
        <el-table-column prop="markName" label="样品位置">
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.hadBox == 1">1F静置区</span>
            <span v-if="scope.row.hadBox == 0">2F静置区</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="" label="静置进度">
          <template slot-scope="scope">
            <span
              >{{ scope.row.overedStandingTime }} min /
              {{ scope.row.standingTime }} min</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="静置状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusName == '静置中'">静置中</el-tag>
            <el-tag v-if="scope.row.statusName == '已完成'" type="success"
              >已完成</el-tag
            ></template
          >
        </el-table-column>
        <el-table-column type="expand" fixed="right">
          <template slot-scope="props">
            <div class="in-table">
              <el-table
                :data="props.row.sampleTestList"
                v-loading="loading"
                style="width: 90%; margin: 0px auto"
                size="small"
              >
                <el-table-column type="index" label="序号" width="60">
                </el-table-column>
                <el-table-column
                  prop="testName"
                  label="试验项目"
                ></el-table-column>
                <el-table-column
                  prop="testRoom"
                  label="静置地点"
                ></el-table-column>
                <el-table-column prop="" label="状态">
                  <template slot-scope="scope">
                    <el-tag
                      size="small"
                      v-if="scope.row.sampleTestFlag == 5"
                      type="success"
                      >已检测</el-tag
                    >
                    <el-tag
                      size="small"
                      v-if="scope.row.sampleTestFlag == 4"
                      type="warn"
                      >检测中</el-tag
                    >
                    <el-tag size="small" v-if="scope.row.sampleTestFlag == 3"
                      >待检测</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startTime"
                  label="开始时间"
                ></el-table-column>
                <el-table-column
                  prop="endTime"
                  label="结束时间"
                ></el-table-column
              ></el-table>
            </div>
          </template>
        </el-table-column> </el-table
    ></template>
    <template v-slot:pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";
import { getSample4 } from "@/common/api";
export default {
  name: "Static",
  props: {},
  components: {
    Common,
  },
  data() {
    return {
      form: {
        // boxMark: "",
        samNumber: "",
        hadBox: "",
      },
      loading: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      options: [
        { label: "1F静置区", value: 1 },
        { label: "2F静置区", value: 0 },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getTable();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTable();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTable();
    },

    selectData() {
      this.pageNum = 1;
      this.getTable();
    },
    reset() {
      this.form = {
        // boxMark: "",
        samNumber: "",
        hadBox: "",
      };
      this.pageNum = 1;
      this.getTable();
    },
    getTable() {
      let param = {
        ...this.form,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        // status: 2,
      };
      this.loading = true;
      getSample4(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            // this.tableData.forEach((i, index) => {
            //   i.index = (this.pageNum - 1) * this.pageSize + index + 1;
            // });
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>


<style lang="scss" scoped>
</style>
